<template>
  <div class="order-detail-page">
    <a-card :bordered="false">
      <a-row>
        <a-col :span="24">
          <a-card class="box-card" :bordered="false">
            <a-skeleton :loading="loading" :rows="0">
              <div class="order-code flex-between">
                <div class="font14 ">
                  <b> 订单编号 HC21030409570009</b>
                  <a-tag color="green"> 已挂单 </a-tag>
                </div>
                <div class="font14">
                  <a-button
                    icon="a-icon-refresh"
                    type="primary"
                    @click="onPageOnlod"
                    >刷新</a-button
                  >
                </div>
              </div>
            </a-skeleton>
          </a-card>
        </a-col>
      </a-row>
      <a-row class="margin-t10">
        <a-col :span="24">
          <a-card class="box-card" :bordered="false">
            <div class="box-card-item price-msg">
              <span class="colorMain title"> 点价信息 </span>
              <a-skeleton :loading="loading" :rows="1">
                <c-table class="table-content" :columns="priceMsgColumn"></c-table> 
              </a-skeleton>
            </div>
            <div class="box-card-item price-child">
              <span class="colorMain title">点价列表</span>
              <a-skeleton :loading="loading" :rows="1">
                <c-table class="table-content" :columns="priceListColumn"></c-table>
              </a-skeleton>
            </div>
            <div class="box-card-item product-msg">
              <span class="colorMain title">商品信息</span>
              <a-skeleton :loading="loading" :rows="1">
                <c-table class="table-content" :columns="productColumn"></c-table>
              </a-skeleton>
            </div>
            <div class="box-card-item order-amount">
              <span class="colorMain title">订单金额</span>
              <a-skeleton :loading="loading" :rows="1">
                <c-table class="table-content" :columns="productColumn"></c-table>
              </a-skeleton>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>

    <a-card :bordered="false">
      <a-row>
        <a-col :span="24">
          <a-card class="box-card"  :bordered="false">
            <div class="box-card-item other-msg">
                <span class="colorMain title"> 其他信息</span>
              <a-skeleton :loading="loading" :rows="1">
                <c-table class="table-content" :columns="otherColumn"></c-table>
              </a-skeleton>
            </div>
            <div class="box-card-item buyer-msg">
                <span class="colorMain title"> 买家信息</span>
              <a-skeleton :loading="loading" :rows="1">
                <c-table class="table-content" :columns="buyerColumn"></c-table>
              </a-skeleton>
            </div>
            <div class="box-card-item seller-msg">
                <span class="colorMain title"> 卖家信息</span>
              <a-skeleton :loading="loading" :rows="1">
                 <c-table class="table-content" :columns="sellerColumn"></c-table>
              </a-skeleton>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";

export default {
  name: "Order",
  components: {},
  data() {
    return {
      loading: false,
      priceMsgColumn: [
        {
          title: "点价人",
          dataIndex: "buyUserName",
          align: "center"
        },
        {
          title: "合约",
          dataIndex: "contractName",
          align: "center"
        },
        {
          title: "基价",
          dataIndex: "",
          align: "center"
        },
        {
          title: "成交数量",
          dataIndex: "",
          align: "center"
        },
        {
          title: "下单数量",
          dataIndex: "quantity",
          align: "center"
        },
        {
          title: "下单时间",
          dataIndex: "createDate",
          align: "center"
        }
      ],
      priceListColumn: [
        {
          title: "基价",
          dataIndex: "buyUserName",
          align: "center"
        },
        {
          title: "下单数量",
          dataIndex: "contractName",
          align: "center"
        },
        {
          title: "成交数量",
          dataIndex: "",
          align: "center"
        },
        {
          title: "状态",
          dataIndex: "",
          align: "center"
        },
        {
          title: "最后操作时间",
          dataIndex: "createDate",
          align: "center"
        }
      ],
      productColumn: [
        {
          label: "商品名称",
          prop: "categoryName"
        },
        {
          label: "品牌",
          prop: "brand"
        },
        {
          label: "规格",
          prop: "spec"
        },
        {
          label: "材质",
          prop: "material"
        },
        {
          label: "其他",
          prop: "other"
        },
        {
          label: "仓库简称",
          prop: "wareHouse"
        }
      ],
      otherColumn: [
        {
          label: "交货方式",
          prop: "categoryName"
        },
        {
          label: "开票日期",
          prop: "brand"
        },
        {
          label: "结算方式",
          prop: "spec"
        }
      ],
      amountColumn: [
        {
          label: "作价方式",
          prop: "categoryName"
        },
        {
          label: "含税单价",
          prop: "brand"
        },
        {
          label: "成交数量",
          prop: "spec"
        },
        {
          label: "订单总金额",
          prop: "material"
        }
      ],
    
      buyerColumn:[{
            label: '公司名称',
            prop: 'buyCompanyName',
          }, {
            label: '求购用户',
            prop: 'buyUserName',
          },
          {
            label: '联系电话',
            prop: 'buyUserPhone',
          },],
      sellerColumn: [{
            label: '公司名称',
            prop: 'buyCompanyName',
          }, {
            label: '求购用户',
            prop: 'buyUserName',
          },
          {
            label: '联系电话',
            prop: 'buyUserPhone',
          },]
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    // this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onPageOnlod() {
      // this.loading = true;
      getUserList({
        // auditState: this.companyStatus ? Number(this.companyStatus) : "",
        pageData: {
          ...{
            // pageSize: this.paginationDatas.pageSize,
            // pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          // this.tableData = res.data.pageData;
          // this.paginationDatas.total = res.data.total;
          // this.loading = false;
          // this.getTableColumn()
        })
        .finally(() => {
          // this.loading = false;
        });
    },
    getTableColumn(data) {
      let productColumn = [
        {
          label: "商品名称",
          prop: "categoryName"
        },
        {
          label: "品牌",
          prop: "brand"
        },
        {
          label: "规格",
          prop: "spec"
        },
        {
          label: "材质",
          prop: "material"
        },
        {
          label: "其他",
          prop: "other"
        },
        {
          label: "仓库简称",
          prop: "wareHouse"
        }
      ];
      let priceMsgColumn = [
        {
          label: "点价人",
          prop: "buyUserName"
        },
        {
          label: "合约",
          prop: "contractName"
        },
        {
          label: "基价",
          prop: ""
        },
        {
          label: "下单数量",
          prop: "quantity"
        },
        {
          label: "下单时间",
          prop: "createDate",
          slot: true
        }
      ];
      if (data.priceType !== "2") {
        productColumn.push({
          label: "升贴水",
          prop: "floatingPrice"
        });
      }
      if (data.priceType === "1") {
        priceMsgColumn.splice(3, 0, {
          label: "成交数量",
          prop: "dealQuantity"
        });
      }
      let sellerColumn = [
        {
          label: "公司名称",
          prop: "buyCompanyName"
        },
        {
          label:
            this.orderDetail[0].priceType === "1" ? "点价用户" : "下单用户",
          prop: "buyUserName"
        },
        {
          label: "联系电话",
          prop: "buyUserPhone"
        }
      ];
      this.productColumn = productColumn;
      this.priceMsgColumn = priceMsgColumn;
      this.sellerColumn = sellerColumn;
    }
  }
};
</script>

<style lang="less" scoped>
.order-detail-page {
  .table-content{
    margin-bottom: 20px;
  }
}
</style>


